<template>
  <div class="app-container">
    <search-box :isMulti="false">
      <template slot="content">
        <div class="left-box">
          <el-form-item label="会议名称">
            <el-input v-model="listQuery.talkName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>
          <el-form-item label="参会人员">
            <el-input v-model="listQuery.userName"
                      placeholder="请输入"
                      clearable/>
          </el-form-item>
          <el-form-item label="会议室名称">
            <el-select v-model="listQuery.meetingName"
                       placeholder="请选择会议室名称">
              <el-option v-for="item in meetingRoomList"
                         :key="item.meetingCode"
                         :label="item.meetingName"
                         :value="item.meetingCode">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="right-box">
          <el-button size="mini"
                     @click="handleFilter">查询
          </el-button>
          <el-button size="mini"
                     @click="reset" type="info">重置
          </el-button>
          <el-button size="mini"
                     type="success" @click="handleCreate">新增
          </el-button>
        </div>
      </template>
    </search-box>


    <div class="table-wrap">
      <el-table :data="list"
                style="width:100%"
                element-loading-text="Loading"
                height="600">
        <el-table-column
          type="index"
          width="50"
          label="序号"
        ></el-table-column>

        <el-table-column prop="meetingName"
                         label="会议室">
        </el-table-column>

        <el-table-column prop="departmentName"
                         label="开会部门">
        </el-table-column>
        <el-table-column prop="talkName"
                         label="会议名称">
        </el-table-column>
        <el-table-column prop="talkDate"
                         label="会议日期">
        </el-table-column>
        <el-table-column prop="talkTime"
                         label="会议时长">

          <template slot-scope="scope">
            {{scope.row.talkTime}} 小时
          </template>
        </el-table-column>
        <el-table-column prop="talkStartTime"
                         label="开始时间">
        </el-table-column>
        <el-table-column prop="talkEndTime"
                         label="结束时间">
        </el-table-column>
        <el-table-column prop="talkFileName"
                         label="会议附件名称" >
          <template slot-scope="scope">
            <span v-if="scope.row.talkFileName!=null" style="color: green" title="点击下载" @click="lookFile(scope.row.talkFileUrl)">
              {{scope.row.talkFileName}}
            </span>
            <span v-else style="color: red">
              暂无附件
            </span>
          </template>

        </el-table-column>


        <el-table-column label="操作" align="center" width="250" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="handleUpdate(scope.row)">
              编辑
            </el-button>
            <el-button size="mini" @click="handleLook(scope.row)">
              查看
            </el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
              删除
            </el-button>
          </template>
        </el-table-column>

      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQuery.pageNumber"
                  :limit.sync="listQuery.pageSize"
                  @pagination="getList"/>
    </div>


    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="70%"
      :before-close="cancel"
    >
      <el-form ref="form" :rules="rules" :model="formData" label-width="120px" class="demo-form-inline"
               style="text-align: center">


        <el-form-item>
          <el-col :span="24">
            <el-form-item label="会议名称" prop="talkName">
              <el-input v-model="formData.talkName"></el-input>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">
            <el-form-item label="参会人员部门" prop="departmentName">
              <el-select v-model="formData.departmentName" @change="getUsersList"
                         placeholder="请选择部门">
                <el-option v-for="item in departmentList"
                           :key="item.departmentName"
                           :label="item.departmentName"
                           :value="item.departmentName">
                </el-option>
              </el-select>

            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参会人员">
              <el-select v-model="userName"
                         placeholder="请选择参会人员" multiple>
                <el-option v-for="item in usersList"
                           :key="item.userCode"
                           :label="item.userName"
                           :value="item.userName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>
          <el-col :span="12">
            <el-form-item label="开始时间">
              <el-col :span="11">
                <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="formData.startDate1"
                                style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker value-format="HH:mm:ss" placeholder="选择时间" v-model="formData.startDate2"
                                style="width: 100%;"></el-time-picker>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间">
              <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="formData.endDate1"
                                style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-time-picker placeholder="选择时间" value-format="HH:mm:ss" v-model="formData.endDate2"
                                style="width: 100%;"></el-time-picker>
              </el-col>
            </el-form-item>
          </el-col>
        </el-form-item>

        <el-form-item>

          <el-col :span="12">
            <el-form-item label="会议室名称" prop="meetingName">
              <el-select v-model="formData.meetingName"
                         placeholder="请选择会议室名称">
                <el-option v-for="item in meetingRoomList"
                           :key="item.meetingCode"
                           :label="item.meetingName"
                           :value="item.meetingName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!--          <el-col :span="12">-->
          <!--            <el-form-item label="会议时长" prop="meetingCode">-->
          <!--              <el-input v-model="formData.meetingCode"></el-input>-->
          <!--            </el-form-item>-->
          <!--          </el-col>-->

        </el-form-item>

        <el-form-item>
          <el-col :span="24">
            <quill-editor
              ref="text"
              v-model="formData.talkText"
              class="myQuillEditor"
              :options="editorOption"
              rows="10"
            />
          </el-col>
        </el-form-item>


        <el-upload
          class="upload-demo"
          :action="fileUrl"
          :on-change="handleChange"
          :file-list="fileList"
          :on-success="handleFileSuccess"
        >
          <el-button size="small" type="primary">点击上传附件</el-button>
        </el-upload>


      </el-form>
      <span slot="footer" class="dialog-footer">
    <el-button @click="lookFile(formData.talkFileUrl)" type="warning" v-if="formData.talkFileUrl!=null">下载附件</el-button>
    <el-button @click="cancel">关 闭</el-button>
    <el-button type="primary" @click="onSubmit" v-if="showButton">提 交</el-button>
    <el-button type="success" @click="onSave" v-if="!showButton">保 存</el-button>
  </span>
    </el-dialog>


    <el-dialog
      title="会议记录"
      :visible.sync="dialogVisibleTab"
      width="40%"
      :before-close="cancel"
    >
      <div id="printMe" style="border: #333333">

        <div style="text-align: center;font-size: 22px;display: flex;flex-direction: row;">
          <div style="width: 15%">
            <img src="../../assets/images/logo.png" alt="" class="logoImgHeader"/><br><br>
          </div>
          <div style="width: 75%">
            {{formData.talkName}}
          </div>

        </div>
        <br>
        <table width="100%" border="1px" cellspacing="0" bgcolor="#000000;">
          <tr style="height: 60px;text-align: center">
            <td bgcolor="#FFFFFF" style="color: #999999">会议部门</td>
            <td bgcolor="#FFFFFF">{{formData.departmentName}}</td>
            <td bgcolor="#FFFFFF" style="color: #999999">参会人员</td>
            <td bgcolor="#FFFFFF">{{formData.userName}}</td>
          </tr>

          <tr style="height: 60px;text-align: center">
            <td bgcolor="#FFFFFF" style="color: #999999">开始时间</td>
            <td bgcolor="#FFFFFF">{{formData.talkStartTime}}</td>

            <td bgcolor="#FFFFFF" style="color: #999999">结束时间</td>
            <td bgcolor="#FFFFFF">{{formData.talkEndTime}}</td>
          </tr>
          <tr style="height: 60px;text-align: center">
            <td bgcolor="#FFFFFF" style="color: #999999">会议地点</td>
            <td bgcolor="#FFFFFF">{{formData.meetingName}}</td>

            <td bgcolor="#FFFFFF" style="color: #999999">会议时长</td>
            <td bgcolor="#FFFFFF">{{formData.talkTime}}小时</td>
          </tr>
          <tr style="height: 430px;text-align: center">
            <td bgcolor="#FFFFFF" style="color: #999999">
              会议概要<br>

            </td>
            <td bgcolor="#FFFFFF" colspan="3" style="vertical-align:top;text-align: left">


              <span v-html="formData.talkText">
                {{formData.talkText}}
              </span>
            </td>

          </tr>

          <tr style="height: 150px;text-align: center">
            <td bgcolor="#FFFFFF" style="color: #999999">
              会议反馈<br>

            </td>
            <td bgcolor="#FFFFFF" colspan="3">

            </td>

          </tr>

          <tr style="height: 130px;text-align: center">
            <td bgcolor="#FFFFFF" style="color: #999999">
              领导意见<br>

            </td>
            <td bgcolor="#FFFFFF" colspan="3">

            </td>

          </tr>
        </table>
        <br>
        <div style="text-align: right;font-size: 14px">
          会议记录人：{{formData.createUserName}}
        </div>
        <br><br>


      </div>

      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">关 闭</el-button>
    <el-button type="success" @click="printFile" v-print="'#printMe'">打 印</el-button>

  </span>


    </el-dialog>


  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import * as meetingRoom from '@/api/meeting/meetingRoom'
  import * as meetingTalking from '@/api/meeting/meetingTalking'
  import * as myProject from '@/api/projectOa/myProject'
  import * as department from '@/api/system-setting/department'
  import * as user from '@/api/system-setting/user'
  import waves from '@/directive/waves' // waves directive
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination
  import bus from '@/utils/eventBus'
  import searchBox from '@/components/searchBox.vue'
  import { quillEditor } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'

  export default {
    name: 'department',
    components: { Pagination, searchBox, quillEditor },
    directives: { waves },
    filters: {},
    data() {
      return {
        list: null,
        total: 0,
        dialogVisible: false,
        dialogVisibleTab: false,
        listQuery: { // 查询列表时的参数对象
          pageNumber: 1,
          departmentName: '',
          departmentCode: '',
          positionName: '',
          roleName: '',
          pageSize: 50,
          name: undefined,
          proPersonLiable: undefined,
          proDepartment: undefined,
          appName: process.env.VUE_APP_APP_NAME,
          tenantIdList: []
        },
        fileUrl:process.env.VUE_APP_BASE_API+'/file/upload',
        userName: '',//参会人员
        departmentList: [],
        meetingRoomList: [],
        editorOption: {},
        fileList: [],
        showButton:false,

        usersList: [],
        listParent: [],

        dialogTitle: '',

        rulesList: [
          { label: '管理员', value: '管理员' },
          { label: '言川一级用户', value: '言川一级用户' },
          { label: '言川二级用户', value: '言川二级用户' },
          { label: '言川三级用户', value: '言川三级用户' }

        ],

        rules: {
          talkName: [{ required: true, message: '会议名称必填', trigger: 'blur' }],
          departmentName: [{ required: true, message: '参会部门必填', trigger: 'blur' }],
          userName: [{ required: true, message: '参会人员必填', trigger: 'blur' }],
          meetingName: [{ required: true, message: '会议室必填', trigger: 'blur' }]
        },
        formData: {}
      }
    },
    computed: {
      ...mapGetters([
        'selectedTenantId',
        'tenantList'
      ])
    },
    created() {
      this.getList()
      this.getmeetingRoomList()
      // this.getRoleList()
      this.getDepartmentList()
      // this.getDepartmentList1()

      // 监听 租户改变的事件,选择不同租户后,立马刷新数据
      bus.$on('selectedTenantIdChanged', () => {
        console.log('selectedTenantIdChanged事件触发...')
        this.getList()
      })

    },
    mounted() {
      // 测试用
      // var that = this
      // setTimeout(function() {
      //   that.dialogFormVisible = true
      // }, 5000)

      // alert(this.$store.getters.selectedTenantId);
    },
    beforeDestroy() { // 当路由切换到其他页面时触发
      bus.$off('selectedTenantIdChanged')
    },
    methods: {
      async getList() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }
        //获取后端数据
        const { content } = await meetingTalking.getTalkingInfoList(this.listQuery)
        this.list = content.list
        this.total = content.totalCounts
      },

      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      },

      handleChange(file, fileList) {
        this.fileList = fileList.slice(-3);
      },

      async getListParent() { // 获取列表数据
        this.listQuery.tenantIdList = []
        if (this.selectedTenantId == undefined) {//当前选中所有的租户
          this.tenantList.forEach((tenant, index) => {
            this.listQuery.tenantIdList.push(tenant.id)
          })
        } else {
          this.listQuery.tenantIdList.push(this.selectedTenantId)
        }

        //获取后端数据
        const { content } = await myProject.getProjectListParent(this.listQuery)
        this.listParent = content

      },

      async getDepartmentList() { // 获取列表数据

        const { content } = await department.getDepartmentList(this.listQuery)
        this.departmentList = content.list

      },

      async getmeetingRoomList() { // 获取列表数据

        const { content } = await meetingRoom.getMeetingRoomInfoListNoPage(this.listQuery)

        this.meetingRoomList = content

      },

      handleFileSuccess(response, file, fileList){
        console.log('response',response.uuid);
        this.formData.talkFileName = response.name;
        this.formData.talkFileUrl = response.uuid;
        response = {};
      },
      // async getDepartmentList1() { // 获取列表数据
      //
      //   const { content } = await department.getDepartmentList(this.listQuery)
      //   this.departmentList1 = content.list
      //
      // },

      // async getRoleList() { // 获取列表数据
      //
      //   const { content } = await department.getRoleList(this.listQuery)
      //   this.rulesList = content.list
      //
      // },
      handleFilter() {
        this.listQuery.pageNumber = 1
        this.getList()
      },

      handleCreate() {
        this.formData = {}
        this.dialogVisible = true
        this.dialogTitle = '会议记录新增'
        this.listQuery = {}
        this.showButton = true;
      },
      handleUpdate(row) {
        this.dialogVisible = true
        this.dialogTitle = '会议记录编辑'
        this.formData = row
        this.userName = row.userName.split(',')
        if (row.talkStartTime != null && row.talkStartTime != '') {
          this.formData.startDate1 = row.talkStartTime.split(' ')[0]
          this.formData.startDate2 = row.talkStartTime.split(' ')[1]
          this.formData.endDate1 = row.talkEndTime.split(' ')[0]
          this.formData.endDate2 = row.talkEndTime.split(' ')[1]
        }
        this.showButton = false;
      },

      handleLook(row) {
        this.dialogVisibleTab = true
        this.formData = row

      },

      handleDelete(row) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          meetingTalking.deleteTalkingInfo(row.id).then(() => {
            this.dialogFormVisible = false
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
            this.getList()
          })
        }).catch(() => {
        })

      },

      reset() {
        this.listQuery.talkName = null
        this.listQuery.meetingName = null
        this.listQuery.userName = null
        this.getList()
      },
      cancel() {
        this.listQuery.talkName = null
        this.listQuery.meetingName = null
        this.listQuery.userName = null
        this.dialogVisible = false
        this.dialogVisibleTab = false
        this.getList()
      },
      printFile() {

      },

      lookFile(fileUrl) {
        window.open(process.env.VUE_APP_BASE_API+'/file/downloadFile?fileName='+fileUrl);
      },
      onSubmit() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.formData.tenantId = this.$store.getters.selectedTenantId
            let userName = ''
            for (let i = 0; i < this.userName.length; i++) {
              userName += (this.userName[i] + ',')
            }
            this.formData.userName = userName.substring(0, userName.length - 1)
            this.formData.talkStartTime = this.formData.startDate1 + ' ' + this.formData.startDate2
            this.formData.talkEndTime = this.formData.endDate1 + ' ' + this.formData.endDate2
            this.formData.talkDate = this.formData.startDate1
            this.formData.talkTime = parseInt(this.formData.endDate2.substring(0, 2)) - parseInt(this.formData.startDate2.substring(0, 2))

            if (this.dialogTitle == '会议记录新增') {
              meetingTalking.createTalkingInfo(this.formData).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '添加成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.listQuery.talkName = null
                  this.listQuery.meetingName = null
                  this.listQuery.userName = null
                  this.dialogVisible = false
                  this.getList()

                }
              })
            } else if (this.dialogTitle == '会议记录编辑') {
              meetingTalking.updateTalkingInfo(this.formData).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '修改成功',
                    type: 'success',
                    duration: 2000
                  })
                  this.listQuery.talkName = null
                  this.listQuery.meetingName = null
                  this.listQuery.userName = null
                  this.dialogVisible = false
                  this.getList()

                }
              })
            }

          } else {
            console.log('error submit!!')
            return false
          }
        })

      },

      onSave() {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            this.formData.tenantId = this.$store.getters.selectedTenantId
            let userName = ''
            for (let i = 0; i < this.userName.length; i++) {
              userName += (this.userName[i] + ',')
            }
            this.formData.userName = userName.substring(0, userName.length - 1)
            this.formData.talkStartTime = this.formData.startDate1 + ' ' + this.formData.startDate2
            this.formData.talkEndTime = this.formData.endDate1 + ' ' + this.formData.endDate2
            this.formData.talkDate = this.formData.startDate1
            this.formData.talkTime = parseInt(this.formData.endDate2.substring(0, 2)) - parseInt(this.formData.startDate2.substring(0, 2))

            if (this.dialogTitle == '会议记录新增') {
              meetingTalking.createTalkingInfo(this.formData).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '保存成功',
                    type: 'success',
                    duration: 2000
                  })
                this.showButton = false;
                }
              })
            } else if (this.dialogTitle == '会议记录编辑') {
              meetingTalking.updateTalkingInfo(this.formData).then((res) => {
                console.log(res)
                if (res.status == 200) {
                  this.$notify({
                    title: '成功',
                    message: '保存成功',
                    type: 'success',
                    duration: 2000
                  })

                }
              })
            }

          } else {
            console.log('error submit!!')
            return false
          }
        })

      }
      ,
      async getUsersList() { // 获取列表数据
        this.formData.userName = ''
        this.usersList = []
        console.log('this.userName', this.userName)
        const { content } = await user.getUserListNoName(this.formData)
        this.usersList = content

      }

    }
  }
</script>

<style scoped>
  .app-select {
    margin-bottom: 20px;
  }

  .logoImgHeader {
    width: 50px;
    height: auto;
    border-radius: 10px;
    margin-top: -15%;

    margin-left: -30%;

  }
</style>
